<div style="border: 1px solid black; border-radius: 5px; margin: 10px 10px 10px 0px;">
    <div class="welcome">
        欢迎您 <span class="name">--</span>，祝您好运！
    </div>

    <div class="money">
        <div class="t">账号余额：</div>
        <div class="value">0.00</div>
        <div class="t" style="margin-left: 40px;">未结余额：</div>
        <div class="value">0.00</div>
        <div class="clear"></div>
    </div>

    <div style="background-color: white;border: 1px solid white;">
        <form action="#" class="am-form am-form-horizontal">
            <fieldset>
                <table>
                    <tr>
                        <td class="label">真实姓名：</td>
                        <td class="field">
                            <input type="text" id="realname" minlength="2" maxlength="8" placeholder="输入真实姓名" 
                                class="am-form-field" disabled="disabled" required/>
                            <div class="input-clue">请填写银行卡上的账户名称</div>
                        </td>
                        <td class="copy"> </td>
                    </tr>
                    
                    <tr>
                        <td class="label">邮箱：</td>
                        <td class="field">
                            <input type="email" id="email" placeholder="输入邮箱地址" class="am-form-field" required/>
                            <div class="input-clue">此为忘记密码时要修改密码之凭证</div>
                        </td>
                        <td class="copy"> </td>
                    </tr>

                    <tr>
                        <td class="label">出生日期：</td>
                        <td class="field">
                            <input style="height: 32px;" name="birthday" type="text" value="" class="am-form-field" placeholder="" data-am-datepicker readonly />
                        </td>
                        <td class="copy"> </td>
                    </tr>

                    <tr>
                        <td class="label">联系电话：</td>
                        <td class="field">
                            <input type="number" id="phone" placeholder="输入手机号" class="am-form-field"/>
                        </td>
                        <td class="copy"> </td>
                    </tr>
                    
                    <tr>
                        <td class="label">QQ号码：</td>
                        <td class="field">
                            <input type="number" id="qq" placeholder="输入联系QQ号码" class="am-form-field"/>
                        </td>
                        <td class="copy"> </td>
                    </tr>
                </table>
                <button class="btn" type="submit">保存</button> 
            </fieldset>
        </form>
    </div>
</div>

<style type="text/css">
    .welcome {
        color: #101010;
        font-size: 18px;
        padding: 2px 0px 5px 20px;
    }
    .welcome .name {
        color: blue;
    }
    .money {
        background-color: #ffd946;
        color: black;
        font-size: 16px;
        padding: 8px;
        border-bottom: 1px solid black;
    }
    .money .t {
        float: left;
    }
    .money .value {
        float: left;
        color: red;
        font-weight: bold;
        background-color: white;
        border: 1px solid white;
        border-radius: 3px;
        padding: 5px;
        min-width: 100px;
        line-height: 18px;
        margin-left: 5px;
    }

    .am-form button {
        margin-left: 200px;
    }
</style>

<script>
    ME.cb = function() {
        $(".welcome .name").html(context.user.user.mobile || '游客');
        $(".money .value").html(context.user.balance/100);
        $($(".money .value")[1]).html(context.user.pending/100);

        // 填充表单
        if (context.user.user.name && context.user.user.name != '') {
            $("#realname").val(context.user.user.name);
            $("#realname").attr("disabled", "disabled");
        }
        else
            $("#realname").removeAttr("disabled");
        if (context.user.user.email2)
            $("#email").val(context.user.user.email2);
        if (context.user.user.birth)
            $("input[name='birthday']").val(context.user.user.birth);
        if (context.user.user.phone)
            $("#phone").val(context.user.user.phone);
        if (context.user.user.qq)
            $("#qq").val(context.user.user.qq);

        // 触发一次就好
        ME.cb = null;
    };

    $(".am-form").validator({
        onValid: Util.form_onValid,
        onInValid: Util.form_onInValid,
        submit: function() {
            var formValidity = this.isFormValid();
            if (!formValidity) return false;
            startLoading();

            var info = {
                name: $("#realname").val().trim(),
                email2: $("#email").val().trim(),
                birth: $("input[name='birthday']").val().trim(),
                phone: $("#phone").val().trim(),
                qq: $("#qq").val().trim(),
            };
            CMD.modify_user_info(null, info, function(r) {
                stopLoading();
                alert2("账号信息保存完成！");
                context.user.user = r;
            });
            return false;
        }
    });
</script>
